/**
  @date: 2019年5月9日10:44:02
  @latest updates: 2019年5月9日10:43:58
  @author: liump
  @desc: 高德地图二次开发,打点划线评估绘图-评估绘图
  @url: draw
  
  数据结构: 
       data = 
      {
        details: [ // 工作明细
          {
            at_point: 0, // 工作点，垂直作业使用
            end_point: 0, // 结束点，水平作业使用
            start_point: 0, // 起始点, 水平作业使用
            work_direction: 0, // 工作方向 0.水平 1.垂直
            work_length: 0, // 工作长度
            work_option: "string", // 工作选项id
            work_type: 0, // 1.管道 2.线路 3.设备 4.溶纤 5.跳纤
            workload: 0 // workload (integer, optional): 重复次数
          }
        ],
        points: [ // 地图打点集合
          {
            distance: 0,
            id: 0,
            lat: 0,
            lng: 0,
            prev: 0
          }
        ],
        pro_id: "string" // 项目id
        pro_lng: [123, 30] // 项目对应的经纬度
      };
  
 */
<template>
  <div class="component-amap">
    <!-- title Start -->
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span></span>评估绘图
          </p>
        </div>
      </div>
    </div>
    <!-- title End and amap Start -->
    <div class="amap">
      <div class="header">
        <div class="h-common">
          开启常用
          <el-switch v-model="commonValue" active-color="#1ABC9C" inactive-color="#CCCCCC"></el-switch>
        </div>
        <div class="h-content">
          <div
            :class="['h-title', changeToolsIndex == index?'active':'']"
            v-for="(item, index) of headerBtns"
            :key="index"
            @click="handleChangeTools(index)"
          >{{item}}</div>
        </div>
      </div>
      <div class="main">
        <div class="search">
          <el-form ref="formSearchLnglat" :model="formSearchLnglat" @submit.native.prevent>
            <el-form-item>
              <el-input
                v-model="formSearchLnglat.searchText"
                placeholder="请输入地址或经纬度"
                @keyup.enter.native="handleSearch"
              >
                <el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-button
          @click="handleShowDistanceData"
          type="primary"
          class="showDistanceData"
          v-show="distanceList.length > 1"
        >{{showDistanceData != true?'显示':'隐藏'}}测距数据</el-button>
        <!-- amap -->
        <div id="draw-amap"></div>
        <el-card class="card-common" v-show="showSettingPro">
          <div slot="header" class="clearfix">
            <span>设置基础参数</span>
            <el-button class="card-common-close-img" type="text" @click="handleCardCommonClose">
              <img src="static/amap/close.png">
            </el-button>
          </div>
          <div>
            选择施工地区:
            <div class="card-common-content">
              <el-col :span="6">
                <el-checkbox v-model="CardCommonPlain" text-color="#1abc9c">平原</el-checkbox>
              </el-col>
              <el-col :span="12">
                <el-checkbox v-model="CardCommonHills" text-color="#1abc9c">丘陵、水田、城区</el-checkbox>
              </el-col>
              <el-col :span="6">
                <el-checkbox v-model="CardCommonMountain" text-color="#1abc9c">山区</el-checkbox>
              </el-col>
            </div>
          </div>
          <div>
            选择环境:
            <div class="card-common-content">
              <el-col :span="6">
                <el-checkbox v-model="CardCommonSoil" text-color="#1abc9c">综合土</el-checkbox>
              </el-col>
              <el-col :span="6">
                <el-checkbox v-model="CardCommonSoftStone" text-color="#1abc9c">软石</el-checkbox>
              </el-col>
              <el-col :span="6">
                <el-checkbox v-model="CardCommonHardStone" text-color="#1abc9c">坚石</el-checkbox>
              </el-col>
            </div>
          </div>
          <el-col :span="24"></el-col>
          <div class="card-common-confirm">
            <el-button type="primary" @click="handleCardCommonClose">确认</el-button>
          </div>
        </el-card>
        <!-- show all table data -->
        <div class="showAllTableData" v-show="changeToolsIndex == 4">
          <el-button type="primary" @click="showAllTableData">
            <span>查看总工作量</span>
          </el-button>
        </div>
      </div>
    </div>
    <!-- amap End and show messages Start -->
    <div class="amap-table" v-show="showBudgetTable">
      <div class="amap-table-header" v-show="!isShowAllTableData">
        <div
          class="amap-table-title"
          v-for="(item, index) of workMessage"
          :key="index"
          v-show="index+1 == changeToolsIndex"
        >{{item}}</div>
        <div class="amap-table-addWork">
          <el-button type="primary" icon="el-icon-plus" @click="getPtwo('1','',1)">
            <span>添加工作内容</span>
          </el-button>
        </div>
      </div>
      <div class="amap-all-table-header" v-show="isShowAllTableData">
        <div
          :class="['amap-all-table-btn', changeTableBtnIndex == index?'amap-all-table-btn-active':'']"
          v-for="(item, index) of changeTableDataBtn"
          :key="index"
          @click="handleChangeTableBtn(index)"
        >{{item}}</div>
      </div>
      <div class="amap-table-content">
        <el-table
          :data="changePipelineTableData"
          border
          style="width: 100%"
          v-show="showTableContent"
        >
          <el-table-column fixed prop="node" label="线程/操作点" width="150" align="center"></el-table-column>
          <el-table-column prop="type" label="操作方式" width="150" align="center"></el-table-column>
          <el-table-column prop="workMessage" label="工作内容" width="300" align="center"></el-table-column>
          <el-table-column prop="num" label="数量" width="160" align="center"></el-table-column>
          <el-table-column prop="distance" label="距离(米)" width="160" align="center"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100" align="center">
            <template slot-scope="scope">
              <span
                @click="handleDeletePipelineData(scope.$index, scope.row, changeToolsIndex)"
                class="table-content-delete"
              >删除</span>
            </template>
          </el-table-column>
        </el-table>
        <el-table
          :data="changeEquipmentTableData"
          border
          style="width: 100%"
          v-show="!showTableContent"
        >
          <el-table-column fixed prop="node" label="操作点" width="100" align="center"></el-table-column>
          <el-table-column prop="lnglat" label="经纬度" width="300" align="center"></el-table-column>
          <el-table-column prop="workMessage" label="工作内容" width="340" align="center"></el-table-column>
          <el-table-column prop="num" label="数量" width="100" align="center"></el-table-column>
          <el-table-column fixed="right" label="操作" width="180" align="center">
            <template slot-scope="scope">
              <span
                @click="handleDeleteEquipmentData(scope.$index, scope.row, changeToolsIndex)"
                class="table-content-delete"
              >删除</span>
            </template>
          </el-table-column>
        </el-table>
        <el-button
          type="primary"
          v-show="isShowAllTableData && isShowUpdateBtn && finishDataClose && isDrawUpdate"
          style="width:160px;margin-top: 20px;"
          @click="updataAllTableData"
          v-loading.fullscreen.lock="updateDataLoading"
        >保存</el-button>
      </div>
    </div>
    <!-- show messages End add message Start -->
    <el-dialog
      :title="workMessage[changeToolsIndex-1]"
      :visible.sync="dialogFormVisible"
      :show-close="false"
    >
      <el-form :model="pipelineAddData">
        <el-form-item label="操作方式 :" :label-width="formLabelWidth" v-show="changeToolsPipeline">
          <el-col :span="4">
            <el-select v-model="pipelineAddData.defaultMode" @change="changeTypeInitPointEnd">
              <el-option
                v-for="(item, index) of pipelineAddData.mode"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item
          label="线路区间 :"
          :label-width="formLabelWidth"
          v-show="changeToolsPipeline && pipelineAddData.defaultMode == '水平'"
        >
          <el-col :span="5">
            <el-select v-model="pipelineAddData.nodeStart" @change="handleChangeNodeEndList">
              <el-option v-for="(item, index) of nodeList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-col>
          <el-col :span="2" style="text-align:center">——</el-col>
          <el-col :span="5">
            <el-select v-model="pipelineAddData.nodeEnd" @change="handleMarkerDistance">
              <el-option
                v-for="(item, index) of nodeEndList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-col>
          <el-col
            :span="6"
            style="text-align:center"
            v-show="showDialogDistance"
          >测距:{{pipelineAddData.distance}}米</el-col>
          <el-col :span="10" style="text-align:center;color:#ff0036" v-show="!showDialogDistance">
            <i class="el-icon-loading"></i>请您核对节点编号.
          </el-col>
        </el-form-item>
        <el-form-item
          label="操作点 :"
          :label-width="formLabelWidth"
          v-show="changeToolsPipeline && pipelineAddData.defaultMode == '垂直'"
        >
          <el-col :span="5">
            <el-select v-model="pipelineAddData.nodeStart">
              <el-option v-for="(item, index) of nodeList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-col>
          <el-col :span="4" style="margin-left:40px;">
            <el-input v-model="pipelineAddData.vertical" autocomplete="off" placeholder="可不填"></el-input>
          </el-col>
          <el-col :span="2" style="margin-left:10px;">米</el-col>
        </el-form-item>
        <el-form-item label="操作点 :" :label-width="formLabelWidth" v-show="changeToolsEquipment">
          <el-col :span="5">
            <el-select v-model="pipelineAddData.nodeStart" @change="showDialogLnglat">
              <el-option v-for="(item, index) of nodeList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3" style="margin-left:40px;">经纬度:</el-col>
          <el-col
            :span="2"
            v-show="this.pipelineAddData.lng"
          >({{pipelineAddData.lng}},{{pipelineAddData.lat}})</el-col>
        </el-form-item>
        <el-form-item label="工作内容 :" :label-width="formLabelWidth">
          <el-col :span="7">
            <el-select
              v-model="pipelineAddData.workMessageOneText"
              @change="getPtwo('', '', 2, pipelineAddData.workMessageOne,pipelineAddData.workMessageOneText)"
            >
              <el-option
                v-for="item of pipelineAddData.workMessageOne"
                :key="item.optionId"
                :value="item.optionName"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="7">
            <el-select
              v-model="pipelineAddData.workMessageTwoText"
              @change="getPtwo('', '', 3, pipelineAddData.workMessageTwo,pipelineAddData.workMessageTwoText)"
            >
              <el-option
                v-for="item of pipelineAddData.workMessageTwo"
                :key="item.optionId"
                :value="item.optionName"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="7">
            <el-select
              v-model="pipelineAddData.workMessageThreeText"
              @change="getPtwo('', '', 4, pipelineAddData.workMessageThree,pipelineAddData.workMessageThreeText)"
            >
              <el-option
                v-for="(item, index) of pipelineAddData.workMessageThree"
                :key="index"
                :value="item.optionName"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="数量 :" :label-width="formLabelWidth">
          <el-col :span="4">
            <el-input v-model="pipelineAddData.num" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddDataCancel">取消</el-button>
        <el-button type="primary" @click="dialogAddDataConfirm" :disabled="!showDialogDistance">确定</el-button>
      </div>
    </el-dialog>
    <!-- add message End -->
  </div>
</template>

<script>
import AMap from "AMap"; //在使用地图的页面引入该组件
import { pipeline } from "stream";
export default {
  name: "draw",
  data() {
    return {
      headerBtns: ["测距画线", "管道安装", "敷设光缆", "放置设备", "熔纤"], // 按钮组名称
      changeToolsIndex: null, // 是否选中对应功能,改变背景色
      pro_id: "", // 项目编号
      currentRow: null, // 项目列表切换行
      CardCommonPlain: false, // 平原
      CardCommonHills: true, // 丘陵、水田、城区
      CardCommonMountain: false, // 山区
      CardCommonSoil: true, // 综合土
      CardCommonSoftStone: false, // 软石
      CardCommonHardStone: false, // 坚石
      showCommonProName: false, // switch 滑块消失后显示当前项目名称
      commonValue: true, // 常用按钮选择
      menuChecked: true, // 项目选择按钮
      showSettingPro: false, // 设置基础参数菜单显示控制
      amap: null, // 地图对象初始化
      isBudget: false, // 开启绘制
      setAMapLnglat: [],
      address: "",
      contextMenu: null, // 消息菜单对象初始化,使用在点标记鼠标右键
      marker: null, // 点标记对象初始化
      path: [], // 线段对象数据
      distanceList: [], // 用于用户绘制后存储
      polyline: null, // 线段对象初始化
      amapData: [], // 用于接收后端传来的数据
      id: 1, // 当前节点编号
      prev: 0, // 当前节点的上一个节点编号
      point_lnglat: [], // 当前节点经纬度
      prev_point_lnglat: [], // 上一个节点的经纬度
      mockPath: [], // 临时绘线数组
      mockPolyline: {}, // 临时绘线的类
      mockPolylineLength: 0, // 临时绘线的距离
      mockText: {}, // 临时绘线测距提示框
      formSearchLnglat: {
        searchText: "" // 搜索框文本
      },
      showBudgetTable: false, // 是否显示地图下面表格
      workMessage: [
        "管道工作内容",
        "线路工作内容",
        "设备工作内容",
        "熔纤工作内容"
      ],
      changeTableDataBtn: ["管道", "线路", "设备", "熔纤"],
      changeTableBtnIndex: 0, // 查看总工作量的时候切换按钮显示
      changeToolsPipeline: true, // 切换弹框选择项 true 为 pipeline 和 line
      changeToolsEquipment: false, // 切换弹框选择项 true 为 equipment 和 melt
      showTableContent: true, // 控制管道/线路,设备/熔纤的2中表格的显示切换
      dialogFormVisible: false,
      pipelineAddData: {
        mode: ["水平", "垂直"],
        defaultMode: "水平",
        nodeStart: "",
        nodeEnd: "",
        lng: null,
        lat: null,
        vertical: "",
        distance: 0,
        workMessageOne: [],
        workMessageTwo: [],
        workMessageThree: [],
        workMessageOneText: "",
        workMessageTwoText: "",
        workMessageThreeText: "",
        num: 1
      },
      nodeList: [], // 选择节点的起点
      nodeEndList: [], // 选择节点的终点,按照起点的选择终点数组的元素只能大于起点
      formLabelWidth: "120px", // 弹框内表单宽度
      isShowAllTableData: false, // 是否显示所有的工作量数据,默认不显示,用于切换一般表格头部和所有工作量表格头部
      isShowUpdateBtn: true, // 保存按钮,只能在表格显示且在熔纤表格下显示
      changePipelineTableData: [], // 表格1的数据切换, 管道/线路
      changeEquipmentTableData: [], // 表格2个数据切换, 设备/熔纤
      pipelineTableData: [], // 管道的数据
      lineTableData: [], // 线路的数据
      equipmentTableData: [], // 设备的数据
      meltTableData: [], // 熔纤的数据
      data: { details: [], points: [], pro_id: "" }, // 提交总数据
      work_option: "", // 工作内容三级联动最后一个内容的ID
      timeOut: 0, // 控制测距防止无限遍历,超过指定次数强行结束
      showDistanceData: false,
      updateDataLoading: false, // 上传数据后控制loading
      finishDataClose: true,
      showDialogDistance: true, // 弹框测距控制,如果选择不是一条正确的线路无法测距并给予提示
      isDrawUpdate: false // 保存上传按钮无接口无显示,V2.0待完善
    };
  },
  watch: {
    commonValue() {
      this.showSettingPro = !this.showSettingPro;
    },
    distanceList() {
      this.nodeList = [];
      this.nodeEndList = [];
      this.distanceList.forEach(el => {
        this.nodeList.push(el.id);
        this.nodeEndList.push(el.id);
      });
    }
  },
  mounted() {
    this.getProList();
    this.init();
  },
  methods: {
    /**
      amap 页面初始化函数,初始化地图,初始化工具库,修改鼠标样式,添加地图点击事件
     */
    init() {
      // 地图实例化
      this.handleAMapInit();

      // 调用地图工具库
      this.handleAMapPlugin();

      // 修改鼠标样式
      this.amap.setDefaultCursor("crosshair");

      // 注册地图鼠标右键点击事件
      this.handleAMapOnRightclick();

      // 注册鼠标移动获取经纬度事件
      this.handleAMapOnMousemove();
    },
    /**
     * 该方法用于控制地图功能
     * @param index 0-4对应按钮功能"测距画线", "管道安装", "敷设光缆", "放置设备", "熔纤"
     */
    handleChangeTools(index) {
      this.changeToolsIndex = index;
      this.isShowAllTableData = false;
      this.showCommonProName = true;
      switch (index) {
        case 0:
          // 这是第一个按钮,测距画线
          this.showBudgetTable = false;
          this.handleAMapOnClick();
          break;
        case 1:
          // 这是第二个按钮,管道安装
          this.changeToolsPipeline = true; // 弹框选择控制
          this.changeToolsEquipment = false; // 弹框选择控制
          // 数据展示,使用 changePipelineTableData
          this.changePipelineTableData = this.pipelineTableData;
          this.showBudgetTable = true;
          this.showTableContent = true;
          // TODO: 这里应该上传数据,或者全局存储最后一次上传到后端
          this.handleAMapOffClick();
          break;
        case 2:
          // 这是第三个按钮,敷设光缆
          this.changeToolsPipeline = true; // 弹框选择控制
          this.changeToolsEquipment = false; // 弹框选择控制
          // 数据展示,使用 changePipelineTableData
          this.changePipelineTableData = this.lineTableData;
          this.showBudgetTable = true;
          this.showTableContent = true;
          // TODO: 这里应该上传数据,或者全局存储最后一次上传到后端
          this.handleAMapOffClick();
          break;
        case 3:
          // 这是第四个按钮,放置设备
          this.changeToolsPipeline = false; // 弹框选择控制
          this.changeToolsEquipment = true; // 弹框选择控制
          // 数据展示,使用 changeEquipmentTableData
          this.changeEquipmentTableData = this.equipmentTableData;
          this.showBudgetTable = true;
          this.showTableContent = false;
          this.handleAMapOffClick();
          break;
        case 4:
          // 这是第五个按钮,熔纤
          this.changeToolsPipeline = false; // 弹框选择控制
          this.changeToolsEquipment = true; // 弹框选择控制
          // 数据展示,使用 changeEquipmentTableData
          this.changeEquipmentTableData = this.meltTableData;
          this.showBudgetTable = true;
          this.showTableContent = false;
          this.handleAMapOffClick();
          break;
        default:
          break;
      }
    },
    /**
     * AMap 地图初始化方法
     * @param lnglat 设置地图显示位置中心点,[lng, lat]
     */
    handleAMapInit() {
      this.amap = new AMap.Map("draw-amap", {
        resizeEnable: true,
        expandZoomRange: true,
        zoom: 20,
        zooms: [3, 20]
      });
    },
    /**
     * 该方法调用了 AMap 地图工具库,缩放标尺,位移圆钮,定位
     */
    handleAMapPlugin() {
      // 调用地图工具库
      AMap.plugin(["AMap.ToolBar", "AMap.Scale"], () => {
        // 调用地图工具,缩放标尺,位移圆钮
        this.amap.addControl(new AMap.ToolBar());
        this.amap.addControl(new AMap.Scale());
      });
    },
    /**
     * 该方法注册了地图左键点击事件
     */
    handleAMapOnClick() {
      this.amap.on("click", this.handleAMapLeftClick);
    },
    handleAMapOnRightclick() {
      // 点标记绑定鼠标右击事件——弹出右键菜单创建分支路线
      this.amap.on("rightclick", e => {
        // 创建右键菜单
        this.contextMenu = new AMap.ContextMenu();
        // this.contextMenu.addItem(
        //   "继续绘图",
        //   e => {
        //     this.handleAMapOnClick();
        //   },
        //   0
        // );
        // 右键结束绘图
        this.contextMenu.addItem(
          "结束绘图",
          e => {
            this.handleAMapOffClick();
            this.handleAMapOffMousemove();
          },
          0
        );
        // 打开菜单
        this.contextMenu.open(this.amap, e.lnglat);
      });
    },
    /**
     * 该方法关闭了地图左键点击事件,结束绘图
     */
    handleAMapOffClick() {
      this.amap.off("click", this.handleAMapLeftClick);
    },
    /**
     * 地图鼠标左键单击事件
     */
    handleAMapLeftClick(e) {
      // 为地图注册click事件获取鼠标点击出的经纬度坐标 e.lnglat.getLng() e.lnglat.getLat()
      let lng = e.lnglat.getLng();
      let lat = e.lnglat.getLat();
      let lnglat = [lng, lat];
      this.prev_point_lnglat = this.point_lnglat;

      // 添加信息,更新数据
      this.updateData(lnglat, this.id, this.prev);
      this.path = [];
      this.handleShowLine(this.distanceList);
    },
    /**
     * 开启鼠标移动事件的方法
     */
    handleAMapOnMousemove() {
      this.amap.on("mousemove", this.handleAMapMousemove);
    },
    /**
     * 关闭鼠标移动事件的方法
     */
    handleAMapOffMousemove() {
      this.amap.off("mousemove", this.handleAMapMousemove);
      this.amap.remove(this.mockPolyline);
      this.amap.remove(this.mockText);
    },
    /**
     * 鼠标移动触发获取经纬度事件
     */
    handleAMapMousemove(e) {
      // e.lnglat // 鼠标移动时当前的经纬度
      this.point_lnglat = [e.lnglat.lng, e.lnglat.lat];
      if (this.prev_point_lnglat[0] && this.point_lnglat[0]) {
        this.handleAMapMousemoveShowLine();
      }
    },
    /**
     * 鼠标移动后画线
     */
    handleAMapMousemoveShowLine() {
      // TODO: 获取上一个点,虚拟画线测距
      this.amap.remove(this.mockPolyline);
      this.amap.remove(this.mockText);
      this.mockPath = [];
      this.mockPolyline = [];

      this.mockPath.push(this.prev_point_lnglat, this.point_lnglat);
      this.mockPolyline = new AMap.Polyline({
        path: this.mockPath,
        strokeColor: "#65f7cd", // 线条颜色
        lineJoin: "round", // 折线拐点连接处样式
        bubble: true
      });
      this.mockPolylineLength = this.mockPolyline.getLength();

      this.mockText = new AMap.Text({
        text: this.mockPolylineLength + "米",
        position: this.point_lnglat,
        anchor: "bottom-left",
        bubble: true
      });
      this.amap.add(this.mockText);
      // 将折线添加至地图实例
      this.amap.add(this.mockPolyline);
    },
    /**
     * 该方法通过传递过来的数据渲染页面
     * @param data 该参数是一个数组,每个元素必须是对象且包含 lng,lat,distance
     */
    handleShowLine(data) {
      // 根据传递过来的数据渲染页面
      // 对数组遍历,需要注意:
      // 1. 第一个点为起始点
      // 2. 每2个点绘制一个线段
      for (let i = 0; i < data.length; i++) {
        let el = data[i];
        let lnglat = [el.lng, el.lat];
        this.handleAddMarker(lnglat, el.id, el.distance);
      }
      this.handleAddLine(data);
    },
    /**
     * 该方法是添加地图点标记函数,在点标记上点击右键可以开始绘制新的分支路线
     * @param lnglats 该参数是经纬度数组,例如 [lng, lat]
     * @param id 该参数是节点编号
     * @param distance 2个点之间的距离
     */
    handleAddMarker(lnglats, id = 0, dt = 0) {
      // 测距信息窗
      let content;
      if (id != 1) {
        content = `<div class='marker-draw-amap'>
          <img src='static/amap/point.png'>
          <div>${id}</div>
          <div class='marker-draw-amap-distance'>${dt}<span>米</span></div>
        </div>`;
      } else {
        content = `<div class='marker-draw-amap'>
          <img src='static/amap/point.png'>
          <div>${id}</div>
        </div>`;
      }
      this.marker = new AMap.Marker({
        icon: "static/amap/circle.png",
        position: lnglats,
        offset: new AMap.Pixel(-4, -4),
        content: content,
        topWhenClick: true
      });
      // 设置多个点标记
      this.marker.setMap(this.amap);

      // 点标记绑定鼠标右击事件——弹出右键菜单创建分支路线
      this.marker.on("rightclick", e => {
        // 创建右键菜单
        this.contextMenu = new AMap.ContextMenu();
        // 右键创建分支线路
        this.contextMenu.addItem("继续画图", e => {
          this.handleAMapOnClick();
          this.handleAMapOnMousemove();
          this.prev_point_lnglat = lnglats;
          this.distanceList.forEach(el => {
            if (el.lng == lnglats[0] && el.lat == lnglats[1]) {
              this.prev = el.id;
            }
          });
        });
        this.contextMenu.addItem("结束绘图", e => {
          this.handleAMapOffClick();
          this.handleAMapOffMousemove();
        });
        this.contextMenu.addItem("删除节点", e => {
          // 遍历数据根据 lnglat 找到指定的元素删掉所有数据
          let len = this.distanceList.length;
          let i;
          for (let index = 0; index < len; index++) {
            const elem = this.distanceList[index];
            if (elem.lng == lnglats[0] && elem.lat == lnglats[1]) {
              i = index;
              this.id = elem.id;
              this.prev = elem.prev;

              break;
            }
          }
          this.distanceList.splice(i);
          this.amap.clearMap();
          this.path = [];
          this.handleShowLine(this.distanceList);
        });
        // 打开菜单
        this.contextMenu.open(this.amap, e.lnglat);
      });
    },
    /**
     * 该方法是绘线的方法,但是划线必须一条一条划线
     * @param lnglats 该参数是经纬度数组,例如 [lng, lat]
     */
    handleAddLine(data) {
      // TODO: 遍历数据,将2个节点之间取经纬度并绘线
      for (let i = 0; i < data.length; i++) {
        let el = data[i];
        // 找到当前节点及上一个节点的经纬度
        let node = el.id; // 当前节点编号
        let prevNode = el.prev; // 上一个节点编号
        let nodeLnglat = [el.lng, el.lat]; // 当前节点经纬度
        let prevLnglat; // 上一个节点经纬度
        if (prevNode == 0) {
          continue;
        }
        for (let index = 0; index < data.length; index++) {
          let elem = data[index];
          if (elem.id === prevNode) {
            prevLnglat = [elem.lng, elem.lat];
          }
        }
        this.path.push(nodeLnglat, prevLnglat);
        this.polyline = new AMap.Polyline({
          path: this.path,
          strokeColor: "#1abc9c", // 线条颜色
          lineJoin: "round" // 折线拐点连接处样式
        });
        // 将折线添加至地图实例
        this.amap.add(this.polyline);
        this.path = [];
      }
    },
    /**
     * 项目列表,设置选中行方法
     */
    setCurrentPro(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    /**
     * 该方法用于push数据
     */
    updateData(lnglats, id, prev) {
      this.distanceList.push({
        id: id,
        prev: prev,
        lng: lnglats[0],
        lat: lnglats[1],
        distance: 0
      });

      this.prev = this.id;
      this.id++;
      if (this.distanceList.length > 1) {
        this.handleDistance();
      }
    },
    /**
     * 该方法是测距方法
     */
    handleDistance() {
      // 测距
      let len = this.distanceList.length;
      for (let i = 0; i < this.distanceList.length; i++) {
        let el = this.distanceList[i];
        // 对每个节点测距
        let distance = 0;
        // 找到当前节点及上一个节点的经纬度
        let node = el.id; // 当前节点编号
        let prevNode = el.prev; // 上一个节点编号
        let nodeLnglat = [el.lng, el.lat]; // 当前节点经纬度
        let prevLnglat; // 上一个节点经纬度
        if (prevNode == 0) {
          continue;
        }

        for (let index = 0; index < this.distanceList.length; index++) {
          let elem = this.distanceList[index];
          if (elem.id === prevNode) {
            prevLnglat = [elem.lng, elem.lat];
          }
        }
        let lnglat1 = new AMap.LngLat(...nodeLnglat);
        let lnglat2 = new AMap.LngLat(...prevLnglat);
        //计算lnglat1到lnglat2之间的实际距离(m)
        let dt = lnglat1.distance(lnglat2);
        dt = parseFloat(dt.toFixed(2));
        el.distance = dt;
      }
    },
    /**
     * 该方法用于获取搜索框数据,根据查找的经纬度转到地图位置
     */
    handleSearch() {
      this.formSearchLnglat.searchText = this.formSearchLnglat.searchText.replace(
        "，",
        ","
      );
      let index = this.formSearchLnglat.searchText.indexOf(",");
      // 如果是经纬度必须逗号隔开
      if (index != -1) {
        this.setAMapLnglat = this.formSearchLnglat.searchText.split(",");
        if (this.setAMapLnglat[1]) {
          this.amap.setCenter(this.setAMapLnglat);
        } else {
          this.$alert(
            "请输入正确的经纬度,例如: 113.739499, 23.040214",
            "提示",
            {
              confirmButtonText: "确定",
              callback: () => {
                this.formSearchLnglat.searchText = "";
              }
            }
          );
        }
      } else {
        // TODO: 如果没有找到","那么视为输入的地址
        let address = {
          address: this.formSearchLnglat.searchText
        };
        let suCb = res => {
          res = res.data;
          // res.message 内容为 lnglat
          if (res.flag == 1) {
            let lnglat = res.message.split(",");
            let lng = parseFloat(lnglat[0]);
            let lat = parseFloat(lnglat[1]);
            lnglat = [lng, lat];
            this.amap.setCenter(lnglat);
            this.amap.setZoom(16);
          }
        };
        let erCb = res => {
          console.log(res);
        };
        let params = {
          url: "/api/web/proMapWorkDetail/getLonLat",
          methods: "post",
          data: address,
          success: suCb,
          error: erCb
        };
        this.$https(params);
      }
    },
    /**
     * 用于选择项目后指引用户画线或者修改常用
     */
    guideSetPoint() {
      this.$confirm("请选择测距画线或者开启不常用模式", "提示", {
        confirmButtonText: "测距画线",
        cancelButtonText: "开启不常用模式",
        type: "warning",
        showClose: false
      })
        .then(() => {
          // succ
          this.changeToolsIndex = 0;
          this.handleChangeTools(this.changeToolsIndex);
        })
        .catch(() => {
          this.showSettingPro = true;
        });
    },
    /**
     * 该方法用于关闭弹框
     */
    handleCardCommonClose() {
      this.showSettingPro = !this.showSettingPro;
      this.changeToolsIndex = 0;
      this.handleChangeTools(this.changeToolsIndex);
    },
    /**
     * 该方法用于管道,线路数据的修改
     */
    handleEditPipelineData(index, row) {
      // this.pipelineTableData
    },
    /**
     * 该方法用于管道,线路数据的删除
     */
    handleDeletePipelineData(index, row, changeToolsIndex) {
      this.changePipelineTableData.splice(index, 1);
      if (changeToolsIndex == 1) {
        this.pipelineTableData = this.changePipelineTableData;
      } else {
        this.lineTableData = this.changePipelineTableData;
      }
    },
    /**
     * 该方法用于设备,熔纤数据的修改
     */
    handleEditEquipmentData() {},
    /**
     * 该方法用于设备,熔纤数据的删除
     */
    handleDeleteEquipmentData(index, row, changeToolsIndex) {
      this.changeEquipmentTableData.splice(index, 1);
      if (changeToolsIndex == 3) {
        this.equipmentTableData = this.changeEquipmentTableData;
      } else {
        this.meltTableData = this.changeEquipmentTableData;
      }
    },
    /**
     * 该方法用于添加信息框的取消按钮,关闭信息框重置数据
     */
    dialogAddDataCancel() {
      this.dialogAddDataInit();
      this.showDialogDistance = true;
      this.dialogFormVisible = false;
    },
    /**
     * 该方法用于重置数据
     */
    dialogAddDataInit() {
      let data = {
        mode: ["水平", "垂直"],
        defaultMode: "水平",
        node: [1, 2, 3, 4, 5, 6, 7, 8],
        nodeStart: "",
        nodeEnd: "",
        lng: null,
        lat: null,
        vertical: "",
        distance: 0,
        workMessageOne: [],
        workMessageTwo: [],
        workMessageThree: [],
        workMessageOneText: "",
        workMessageTwoText: "",
        workMessageThreeText: "",
        num: 1
      };
      this.pipelineAddData = data;
    },
    /**
     * 该方法用于添加信息框的确认按钮
     */
    dialogAddDataConfirm() {
      // TODO: 修改方法,只需要取值不计算
      let data = this.distanceList;

      let obj = {};

      if (this.pipelineAddData.nodeEnd) {
        obj.node =
          this.pipelineAddData.nodeStart + "-" + this.pipelineAddData.nodeEnd;
      } else {
        obj.node = this.pipelineAddData.nodeStart;
      }

      let type = this.pipelineAddData.defaultMode;
      obj.type = type;

      let at_point = 0;
      let distance = this.pipelineAddData.distance;
      let work_direction = 0;

      if (this.changeToolsIndex == 1) {
        if (type == "水平") {
          work_direction = 0;
        } else {
          work_direction = 1;
          distance = this.pipelineAddData.vertical;
          at_point = this.pipelineAddData.nodeStart;
        }
      } else if (this.changeToolsIndex == 2) {
        if (type == "水平") {
          work_direction = 0;
        } else {
          work_direction = 1;
          distance = this.pipelineAddData.vertical;
          at_point = this.pipelineAddData.nodeStart;
        }
      } else if (this.changeToolsIndex == 3) {
        at_point = this.pipelineAddData.nodeStart;
        distance = this.pipelineAddData.vertical;
      } else if (this.changeToolsIndex == 4) {
        at_point = this.pipelineAddData.nodeStart;
        distance = this.pipelineAddData.vertical;
      }

      obj.at_point = at_point;
      obj.work_direction = work_direction;

      obj.start_point = this.pipelineAddData.nodeStart;
      obj.end_point = this.pipelineAddData.nodeEnd;
      obj.work_length = this.pipelineAddData.num;

      obj.workMessage =
        this.pipelineAddData.workMessageOneText +
        " " +
        this.pipelineAddData.workMessageTwoText +
        " " +
        this.pipelineAddData.workMessageThreeText;

      let work_option = ""; // 三级联动最后一个选项的ID
      obj.work_option = work_option;

      let work_type = 0;
      obj.work_type = this.changeToolsIndex;

      obj.lnglat = this.pipelineAddData.lng + "," + this.pipelineAddData.lat;

      let num = this.pipelineAddData.num;
      obj.num = num;

      obj.distance = distance;

      obj.work_option = this.work_option;

      if (this.changeToolsIndex == 1) {
        obj.work_length = num;
        this.changePipelineTableData.push(obj);
        this.pipelineTableData = this.changePipelineTableData;
      } else if (this.changeToolsIndex == 2) {
        obj.work_length = num;
        this.changePipelineTableData.push(obj);
        this.lineTableData = this.changePipelineTableData;
      } else if (this.changeToolsIndex == 3) {
        obj.workload = num;
        this.changeEquipmentTableData.push(obj);
        this.equipmentTableData = this.changeEquipmentTableData;
      } else if (this.changeToolsIndex == 4) {
        obj.workload = num;
        this.changeEquipmentTableData.push(obj);
        this.meltTableData = this.changeEquipmentTableData;
      }

      this.dialogAddDataInit();
      this.dialogFormVisible = false;
    },
    /**
     * 浮点精度丢失解决方法
     */
    accAdd(arg1, arg2) {
      let r1, r2, m;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      return ((arg1 * m + arg2 * m) / m).toFixed(2);
    },
    /**
     * 弹框中测距方法,如果没有画线无法测距
     */
    handleMarkerDistance() {
      let data = this.distanceList;

      let nodeStart = this.pipelineAddData.nodeStart;
      let nodeEnd = this.pipelineAddData.nodeEnd;

      if (nodeStart == "") {
        nodeStart = 0;
      }
      if (nodeEnd == "") {
        // nodeEnd = 0;
        return;
      }

      let distance = 0;
      let point_code = nodeEnd;

      if (this.distanceList.length > 1) {
        // // TODO: 根据2个节点测距,1. 如果2个节点正好是一个线段,直接取distance,2. 如果2个节点不是一个线段那么根据最后一个节点反推上一个节点直到找到起始点
        // 遍历数组找到终点元素
        this.showDialogDistance = true;
        for (let index = data.length - 1; index >= 0; index--) {
          const el = data[index];
          // 如果元素的id == 选择的终点,那么就找到了指定的点,然后取出当前元素的上一个节点并对终点赋值,
          if (el.id == point_code) {
            distance = this.accAdd(distance, el.distance);
            point_code = el.prev;
          }
          // 当被赋值的终点等于起点时打断遍历,如 2-7 ,当终点变为2时打断遍历跳过对第一个点的测距
          if (point_code == nodeStart) {
            break;
          }
          // 选择的不是顺着的一条线,无法倒推测距
          if (point_code == 0) {
            // TODO: 弹框错误提示禁止确认
            this.showDialogDistance = false;
          }
        }
      }
      this.pipelineAddData.distance = distance;
    },
    /**
     * 切换添加工作内容弹框中操作点的数组,当起点变更时终点数组变更为比起点大的数组
     */
    handleChangeNodeEndList() {
      let index = this.nodeList.indexOf(this.pipelineAddData.nodeStart);
      this.nodeEndList = this.nodeList.filter((el, i) => {
        return i > index;
      });
      if (this.pipelineAddData.endStart != "") {
        this.handleMarkerDistance();
      }
    },
    /**
     * 设备和熔纤的弹框中经纬度的显示方法
     */
    showDialogLnglat() {
      let node = this.pipelineAddData.nodeStart;
      let lng, lat;
      this.distanceList.forEach(el => {
        if (el.id == node) {
          this.pipelineAddData.lng = el.lng;
          this.pipelineAddData.lat = el.lat;
        }
      });
    },
    handleChangeTableBtn(index) {
      this.changeTableBtnIndex = index;
      switch (index) {
        case 0:
          // 这是第一个按钮,管道数据显示
          this.showTableContent = true;
          this.changePipelineTableData = this.pipelineTableData;
          break;
        case 1:
          // 这是第二个按钮,线路数据显示
          this.showTableContent = true;
          this.changePipelineTableData = this.lineTableData;
          break;
        case 2:
          // 这是第三个按钮,设备数据显示
          this.showTableContent = false;
          this.changeEquipmentTableData = this.equipmentTableData;
          break;
        case 3:
          // 这是第四个按钮,熔纤数据显示
          this.showTableContent = false;
          this.changeEquipmentTableData = this.meltTableData;
          break;
        default:
          break;
      }
    },
    /**
     * 数据提交details的对象初始化方法
     */
    allTableDataInit() {
      let obj = {
        at_point: 0,
        end_point: 0,
        start_point: 0,
        work_direction: 0,
        work_length: 0,
        work_option: "",
        work_type: 0,
        workload: 0
      };
      return obj;
    },
    allDataInit() {
      let data = { details: [], points: [], pro_id: "" };
      return data;
    },
    /**
     * 所有数据提交方法
     */
    updataAllTableData() {
      // TODO: V2.0待完成,接口:

      // 保存完成后可能添加数据在保存这时候就需要初始化数据在重构数据
      this.data = this.allDataInit();

      this.data.points = this.distanceList;
      this.data.pro_id = this.pro_id;

      // 初始化数据
      let detailsObj = {
        at_point: 0,
        end_point: 0,
        start_point: 0,
        work_direction: 0,
        work_length: 0,
        work_option: "",
        work_type: 0,
        workload: 0
      };

      let pipelineText = "";
      let lineText = "";
      let equipmentText = "";
      let meltText = "";

      // 处理数据
      this.pipelineTableData.forEach(el => {
        pipelineText = "管道";
        // 三级联动最后的ID
        detailsObj.work_option = el.work_option;
        detailsObj.work_type = 1;
        detailsObj.work_length = el.distance;
        detailsObj.workload = el.num;
        if (el.work_direction == 0) {
          detailsObj.start_point = el.start_point;
          detailsObj.end_point = el.end_point;
        } else {
          detailsObj.at_point = el.at_point;
          detailsObj.work_direction = el.work_direction;
        }
        this.data.details.push(detailsObj);
        detailsObj = this.allTableDataInit();
      });

      this.lineTableData.forEach(el => {
        lineText = "线路";
        // 三级联动最后的ID
        detailsObj.work_option = el.work_option;
        detailsObj.work_type = 2;
        detailsObj.work_length = el.distance;
        detailsObj.workload = el.num;
        if (el.work_direction == 0) {
          detailsObj.start_point = el.start_point;
          detailsObj.end_point = el.end_point;
        } else {
          detailsObj.at_point = el.at_point;
          detailsObj.work_direction = el.work_direction;
        }
        this.data.details.push(detailsObj);
        detailsObj = this.allTableDataInit();
      });
      this.equipmentTableData.forEach(el => {
        equipmentText = "设备";
        // 三级联动最后的ID
        detailsObj.work_option = el.work_option;
        detailsObj.work_type = 3;
        detailsObj.workload = el.num;
        detailsObj.at_point = el.at_point;
        detailsObj.work_direction = 1;
        this.data.details.push(detailsObj);
        detailsObj = this.allTableDataInit();
      });
      this.meltTableData.forEach(el => {
        meltText = "熔纤";
        // 三级联动最后的ID
        detailsObj.work_option = el.work_option;
        detailsObj.work_type = 4;
        detailsObj.workload = el.num;
        detailsObj.at_point = el.at_point;
        detailsObj.work_direction = 1;
        this.data.details.push(detailsObj);
        detailsObj = this.allTableDataInit();
      });

      // 成功
      let suCb = res => {
        this.updateDataLoading = false;
        this.finishDataClose = false;
        this.$alert("信息上传成功", "提示", {
          confirmButtonText: "确定"
        });
      };
      // 失败
      let erCb = res => {
        this.updateDataLoading = false;
        // this.$alert("信息上传失败", "提示", {
        //   confirmButtonText: "确定"
        // });
      };

      let param = {
        url: "",
        methods: "post",
        data: this.data,
        success: suCb,
        error: erCb
      };

      if (lineText != "线路") {
        this.$alert("您最少需要输入光纤线路信息", "提示", {
          confirmButtonText: "确定"
        });
      } else {
        this.$confirm(
          `请仔细核对您的工作量是否为:${pipelineText} ${lineText} ${equipmentText} ${meltText} ,如漏填请完善后提交.`,
          "提示",
          {
            confirmButtonText: "确定无误",
            cancelButtonText: "取消",
            showClose: false,
            type: "warning"
          }
        )
          .then(() => {
            this.$message({
              type: "success",
              message: "正在上传"
            });
            // 确认无误后上传数据
            // this.$https(param);
            this.updateDataLoading = true;
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "更新信息"
            });
          });
      }
      // let jsonData = JSON.stringify(this.data);
    },
    /**
     * 查看总工作量按钮点击后切换到表1
     */
    showAllTableData() {
      this.changeTableBtnIndex = 0;
      this.isShowAllTableData = true;
      this.showTableContent = true;
      this.changePipelineTableData = this.pipelineTableData;
    },
    /**
     * 获取工作内容3级级联
     * @param {string} optionDeep 最高级别,当第一级选择必带1,而级级联以后为 ''
     * @param parentId 本级级联获取后 name 对应的 id ,用于下级级联请求时携带
     * @param index 控制第几次发送请求,用于获取对应级联数据
     * @param dataArr 非第一次请求必带,当前的数组,用于 name 遍历获取 id
     * @param str 当前选择的 name
     */
    getPtwo(optionDeep = "", parentId = "", index = 1, dataArr = [], str = "") {
      if (index == 2) {
        this.pipelineAddData.workMessageTwoText = "";
        this.pipelineAddData.workMessageThreeText = "";
      }
      if (index == 3) {
        this.pipelineAddData.workMessageThreeText = "";
      }

      // TODO: /api/web/ptwo/getPtwo
      this.dialogFormVisible = true;

      let postData = {};
      if (optionDeep == "1") {
        postData.optionDeep = "1";
      }
      postData.optionDeep = optionDeep;
      postData.teamType = this.changeToolsIndex + "";
      if (str != "") {
        dataArr.forEach(el => {
          if (el.optionName == str) {
            parentId = el.optionId + "";
          }
        });
      }

      postData.parentId = parentId;
      this.work_option = parentId;

      // 三级级联 请求成功
      let getPtwoInfoSucc = res => {
        res = res.data;
        if (res.flag == 1) {
          let data = res.data;
          switch (index) {
            case 1:
              this.pipelineAddData.workMessageOne = data;
              break;
            case 2:
              this.pipelineAddData.workMessageTwo = data;
              break;
            case 3:
              this.pipelineAddData.workMessageThree = data;
              break;
            case 4:
              break;
            default:
              break;
          }
        }
      };

      // 三级级联 请求失败
      let getPtwoInfoErr = res => {};
      let param = {
        url: "/api/web/ptwo/getPtwo",
        methods: "post",
        data: postData,
        success: getPtwoInfoSucc,
        error: getPtwoInfoErr
      };
      this.$https(param);
    },
    /**
     *
     */
    changeTypeInitPointEnd() {
      this.pipelineAddData.nodeEnd = "";
      this.pipelineAddData.distance = 0;
    },
    handleShowDistanceData() {
      this.handleAMapOffClick();
      let distance_list = document.querySelectorAll(
        ".marker-draw-amap-distance"
      );
      if (this.showDistanceData) {
        this.showDistanceData = false;
        distance_list.forEach(el => {
          el.style.display = "none";
        });
      } else {
        this.showDistanceData = true;
        distance_list.forEach(el => {
          el.style.display = "block";
        });
      }
    },
    getProList() {
      // /api/web/proProject/selectByBugect
      // 成功
      let suCb = res => {
        res = res.data;
        if (res.flag == 1) {
          let data = res.data;

          data.forEach(el => {
            let obj = {};
            obj.pro_id = el.proId;
            obj.pro_name = el.proName;
            obj.pro_num = el.proNo;
            obj.pro_lnglat = el.proLng + "," + el.proLat;
            obj.pro_lng = el.proLng;
            obj.pro_lat = el.proLat;
            this.proData.push(obj);
          });
        }
      };
      // 失败
      let erCb = res => {};

      let param = {
        url: "/api/web/proProject/selectByBugect",
        methods: "post",
        data: "",
        success: suCb,
        error: erCb
      };
      this.$https(param);
    }
  }
};
</script>

<style scoped>
/* 组件宽度 */
.amap {
  width: 1100px;
  margin: 20px auto 0;
}
/* 头部样式 */
.header {
  width: 100%;
  height: 48px;
  background: #f3f3f3;
  border: 1px solid #e4e4e4;
  border-bottom: 2px solid rgba(181, 224, 254);
}
.h-common {
  width: 112px;
  height: 28px;
  line-height: 28px;
  margin-left: 20px;
  margin-top: 8px;
  font-size: 14px;
  text-align: left;
  float: left;
}
.h-pro-name {
  margin-left: 20px;
  margin-top: 14px;
  font-size: 14px;
  text-align: left;
  float: left;
}
.h-content {
  width: 400px;
  height: 29px;
  line-height: 29px;
  float: right;
  margin-top: 7px;
  font-size: 12px;
  display: flex;
  margin-right: 32px;
  border: 1px solid rgba(215, 215, 215, 1);
  cursor: pointer;
}
.h-title {
  width: 80px;
  height: 29px;
  line-height: 29px;
  background: #fff;
  border-right: 1px solid rgba(215, 215, 215, 1);
}
.h-title:last-child {
  border-right: 0;
}
.active {
  background: #1abc9c;
  color: #fff;
}
.topleft span {
  width: 4px;
  height: 18px;
  display: inline-block;
  background: #1abc9a;
  margin-right: 4px;
  vertical-align: -4px;
}
/* 主体样式,地图,搜索框 */
.main {
  widows: 100%;
  height: 500px;
  position: relative;
}
#draw-amap {
  position: absolute;
  width: 100%;
  height: 500px;
}
.search {
  position: absolute;
  z-index: 100;
  top: 30px;
  left: 200px;
  height: 20px;
  display: flex;
}
.showDistanceData {
  position: absolute;
  z-index: 100;
  top: 20px;
  right: 20px;
}
/* 创建信息弹框主体 */
.menu-main-content {
  background: #fff;
  margin: -1px auto 0;
  font-size: 12px;
}
.menu-main-content label {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.menu-main-header div {
  border: 1px solid transparent;
  border-right-color: #e4e4e4;
}
.menu-main-header div:first-child {
  width: 35px;
}
.menu-main-header div:nth-child(2) {
  width: 108px;
}
.menu-main-header div:nth-child(3) {
  width: 106px;
}
.menu-main-header div:nth-child(4) {
  width: 142px;
}
.menu-main-header div:nth-child(5) {
  width: 155px;
  border: 0;
}
.create-menu-footer {
  margin: 20px auto;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.clearfix span {
  float: left;
}
.card-common-close-img {
  float: right;
  padding: 3px 0;
}

.card-common {
  width: 335px;
  height: 258px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 100;
  text-align: left;
  font-size: 12px;
}
.card-common-content {
  margin-top: 8px;
}
.card-common-confirm {
  margin-top: 80px;
  text-align: center;
}
/* 查看总工作量 */
.showAllTableData {
  z-index: 100;
  position: absolute;
  bottom: 20px;
  right: 20px;
}
/* 地图table 信息列表 */
.amap-table {
  width: 1030px;
  margin: 20px auto 0;
}
.amap-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.amap-all-table-header {
  display: flex;
}
.amap-all-table-btn {
  width: 120px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  border: 1px solid #e4e4e4;
}
.amap-all-table-btn:not(:first-child) {
  margin-left: 20px;
}
.amap-all-table-btn-active {
  background: #1abc9c;
  color: #fff;
}
.amap-table-addWork {
  display: flex;
  justify-content: center;
  align-items: center;
}
.amap-table-content {
  margin-top: 20px;
}
.amap-table-content .table-content-delete {
  text-decoration: underline;
  color: #1abc9c;
  cursor: pointer;
}
</style>

<!-- 在全局中修改地图的css -->
<style>
.component-amap .el-card__header {
  background: #f2f2f2;
  padding: 6px 20px;
  line-height: 23px;
}
.component-amap .marker-draw-amap {
  position: relative;
}
.component-amap .marker-draw-amap-distance {
  display: none;
}

.component-amap .marker-draw-amap img {
  position: absolute;
}
.component-amap .marker-draw-amap div:nth-child(2) {
  color: red;
  position: absolute;
  top: -20px;
  left: 0px;
}
.component-amap .marker-draw-amap div:nth-child(3) {
  height: 20px;
  line-height: 20px;
  padding: 3px 6px;
  background: #fff;
  border: 1px solid red;
  position: absolute;
  left: 6px;
  top: 6px;
}
.component-amap .el-dialog__header,
.component-amap .el-dialog__body {
  text-align: left;
}
.component-amap .el-button--primary:hover {
  color: #fff;
}
</style>

